<template>
     <div class="carefully">
      <van-swipe @change="onChange">
        <van-swipe-item>
       <ul class="carefullyul">
        <li><span class="color">精选</span><br><span>猜你喜欢</span></li>
        <li><span>搭配</span><br><span>c位穿搭</span></li>
        <li><span>配饰</span><br><span>穿搭有型</span></li>
       </ul>
        </van-swipe-item>
        <van-swipe-item>
        <ul class="carefullyul">
        <li><span class="color">搭配</span><br><span>c位穿搭</span></li>
        <li><span>精选</span><br><span>猜你喜欢</span></li>
        <li><span>配饰</span><br><span>穿搭有型</span></li>
       </ul>
        </van-swipe-item>

        <template #indicator>
          <div class="custom-indicator mincarousel1" :class="{mincarousel2:current==0}"  ><span><span></span></span>  </div>
        </template>
      </van-swipe>
    </div>
</template>
<script>
export default {
    data() {
        return {
            current:0,
        }
    },
    methods:{
        onChange(index) {
      this.current = index;
    },  
    }
    
}
</script>
<style lang="less" scoped>
    .carefully{
        margin-top: 10px;
        padding-left: 20px;
        width: 100vw;
        .carefullyul{
            
            font-size: 30px;
            width: 710px;
            height: 130px;
            // background-color: gray;
            li{
                padding-top: 25px;
                text-align: center;
                width:33.33%;
                float: left;
                &:nth-child(1){
                    span{
                        
                        &:nth-last-child(1){
                            border-radius:20px ;
                            line-height: 31px;
                            height: 36px;
                            font-size: 23px;
                            color: #f6f6f6;
                            width: 120px;
                            display: inline-block;
                            background-color: #f0493e;
                        }
                    }
                }
                span{
                    &:nth-last-child(1){
                        font-size: 24px;
                        color: gray;
                    }
                    &:nth-child(1){
                        font-weight: bold;
                    }
                    
                }
            .color{
                font-weight: bold;
                color: #f04c41;
            }
            
            }
        }
    }
     .mincarousel1{
     text-align: center;
      span{
        border-radius :10px ;
        text-align: center;
        display:inline-block;
          width: 15%;
          height: 11px;
          border: 1px solid white;
          background-color: #d3d3d3;
        span{
          height: 10px;
           border-radius :10px ;
          float: right;
           width: 50%;
          background-color: #fc2e21;
        }
      }
      
  }
  .mincarousel2{
      span{
        span{
          float: left;
        }
      }  
  }
</style>